<template>
	<view class="root">
		<view class="swiper">
			<u-swiper :list="list"></u-swiper>
		</view>
		
		<view class="recommend">
			<text class="title">重点推荐</text>
			<text class="content">官方审核、售后无忧</text>
		</view>
		
		<view class="container">
			 <view>
			 	<view class="picture">
			 		<image src="../../../static/007.jpg" mode="" class="img"></image>
			 	</view>
			 	<view>
			 		<text>郭慧庆《境与静——春系列》</text>
			 	</view>
			 </view>
			 
			 <view>
			 	<view class="picture">
			 		<image src="../../../static/007.jpg" mode="" class="img"></image>
			 	</view>
			 	<view>
			 		<text>郭慧庆《境与静——春系列》</text>
			 	</view>
			 </view>
			 
			 <view>
			 	<view class="picture">
			 		<image src="../../../static/007.jpg" mode="" class="img"></image>
			 	</view>
			 	<view>
			 		<text>郭慧庆《境与静——春系列》</text>
			 	</view>
			 </view>
		</view>
		
		<view class="column">
			<u-subsection  bg-color="#f8f8f8" active-color="#c81917" inactive-color="#949494" :animation="false" :list="lists" :current="2"></u-subsection>
		</view>
		
		<!-- 已结束商品列表 -->
		<view class="shoplist">
			<view class="bg">
				<image src="../../../static/finishbg.png" mode=""></image>
				<view class="end">
					<text>距结束：3天12个小时</text>
				</view>
				<text class="time">124次浏览</text>
				<text class="amount">五件拍品</text>
			</view>
			<view class="name">
				<text>徐冰英文方块字专场</text>
			</view>
		</view>
		
		<view class="shoplist">
			<view class="bg">
				<image src="../../../static/finishbg.png" mode=""></image>
				<view class="end">
					<text>距结束：3天12个小时</text>
				</view>
				<text class="time">124次浏览</text>
				<text class="amount">五件拍品</text>
			</view>
			<view class="name">
				<text>徐冰英文方块字专场</text>
			</view>
		</view>
	</view>
</template>

<script>
		export default {
			data() {
				return {
					lists: [
										{
											name: '竞拍中'
										}, 
										{
											name: '预展中'
										}, 
										{
											name: '已结束'
										},
										{
											name: '热拍列表'
										}
									],
									current: 2,
					list: [{
							image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
							title: '昨夜星辰昨夜风，画楼西畔桂堂东'
						},
						{
							image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
							title: '身无彩凤双飞翼，心有灵犀一点通'
						},
						{
							image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
							title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
						},
						{
							image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
							title: '身无彩凤双飞翼，心有灵犀一点通'
						},
						{
							image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
							title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
						}
					],
				}
			},
			methods: {
	
			}
		}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}
	.recommend{
		width: 90%;
		margin-left: 5%;
		height: 60rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.recommend .title {
		font-size: 32rpx;
		font-weight: 700;
	}
	.recommend .content{
		font-size: 28rpx;
		color: #939393;
		margin-right: 5%;
	}
	.container{
		display: flex;
	  justify-content: space-around;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.container .img{
		width: 90%;
		height: 200rpx;
	}
	.container text {
		font-size: 28rpx;
		letter-spacing: 4rpx;
	}
	
	.column{
		margin-top: 10rpx;
	}
	.shoplist{
		width: 100%;
	}
	.bg{
		position: relative;
	}
	.bg image{
		width: 90%;
	  margin: 5%;
		border-radius: 12rpx;
	}
	.bg .end {
		width: 280rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size:24rpx;
		text-align: center;
		background-color: #c6100e;
		color: #FFFFFF;
		border-radius: 0 100rpx 100rpx 0;
		position: absolute;
		left: 5%;
		top: 15%;
	}
	
	.bg .time{
		font-size: 24rpx;
		position: absolute;
		left: 8%;
		bottom: 10%;
		color: #c6100e;
	}
	
	.bg .amount {
		font-size: 24rpx;
		position: absolute;
		right: 8%;
		bottom: 10%;
		color: #c6100e;
	}
	
	.name{
		font-size: 28rpx;
		margin-left: 5%;
		margin-top: -20rpx;
	 }
</style>